// NavigationList.js
import React, { useEffect, useState } from 'react';
import axios from 'axios';
import Avatar from '@/assets/images/avatar.jpg'

const NavigationList = ({ websites }) => {
    const [previewImages, setPreviewImages] = useState([]);

    useEffect(() => {
        const fetchPreviewImages = async () => {
            try {
                const promises = websites.map(async (website) => {
                    try {
                        const response = await axios.get(
                            `https://opengraph.io/api/1.1/site/${encodeURIComponent(website.url)}?app_id=b8f72aac-4276-4462-bf97-4cc5f0ac9ae3`)
                        const previewImage = response.data.openGraph.image ? response.data.openGraph.image.url : Avatar;
                        return { name: website.name, url: website.url, previewImage };
                    } catch (error) {
                        console.error('Error fetching preview images', error);
                        return { ...website };
                    }
                });

                const updatedPreviewImages = await Promise.all(promises);
                setPreviewImages(updatedPreviewImages);
            } catch (error) {
                console.error('Error fetching preview images', error);
            }
        };

        fetchPreviewImages();
    }, [websites]);

    return (
        <ul>
            {previewImages.map((website, index) => (
                <li key={index}>
                    <img src={website.previewImage} alt={website.name} style={{ height: 100 }} />
                    <a href={website.url} target="_blank" rel="noopener noreferrer">
                        {website.name}
                    </a>
                </li>
            ))}
        </ul>
    );
};

export default NavigationList;
